<template>
  <div class="centerDiv" v-if="topList.length > 0">
    <div :class="['itemDiv', activeIndex == index ? 'active' : '']" v-for="(item, index) in topList" :key="index" @click="changePage(item, index)">
      <p>{{ item }}</p>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'CenterVue',

  data() {
    return {
      topList: [],
      activeIndex: 1
    }
  },
  computed: {
    ...mapState({
      allStatus: (state) => state.allStatus
    })
  },
  watch: {
    allStatus(newVal, oldVal) {
      if (newVal == '总览' || newVal == '四管') {
        this.topList = []
      } else if (newVal == '四全') {
        this.topList = ['全覆盖', '全要素', '全天候', '全周期']
        this.activeIndex = 0
      } else if (newVal == '四制') {
        this.topList = ['体制', '机制', '法制', '责任制']
        this.activeIndex = 0
      } else if (newVal == '四预') {
        this.topList = ['预报', '预警', '预演', '预案']
        this.activeIndex = 0
      }
      if (this.$route.path == '/qzq') {
        this.activeIndex = 3
        this.$store.commit('changeTwoStatus', '全周期')
      } else {
        this.$store.commit('changeTwoStatus', this.topList[this.activeIndex])
      }
    }
  },
  mounted() {},
  methods: {
    changePage(item, index) {
      if (item == '全周期') {
        this.$router.push('/qzq')
      } else {
        if (this.$route.path != '/zlIndex') {
          this.$router.push('/zlIndex')
        }
      }
      this.activeIndex = index
      this.$store.commit('changeTwoStatus', item)
    }
  }
}
</script>

<style lang="scss" scoped>
.centerDiv {
  width: 36%;
  height: 6vh;
  position: absolute;
  top: 10vh;
  left: 32%;
  display: flex;
  z-index: 990;
  .itemDiv {
    width: 24%;
    height: 100%;
    background: url('@/assets/img/common/topItem2.png') no-repeat;
    background-size: 100% 65%;
    background-position: bottom;
    font-family: Source Han Sans CN;
    font-weight: 500;
    font-size: 2.2vh;
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
  }
  .active {
    background: url('@/assets/img/common/topItem1.png') no-repeat;
    background-size: 100% 65%;
    background-position: bottom;
  }
}
</style>
